<template>
  <view class="container">
    <view style="display: flex;justify-content: space-between;padding: 20rpx">
      <span style="font-size: 30rpx;font-weight: bolder">{{ data.name }}</span>
      <view style="display: flex;align-items: center" @click="data.more=!data.more">
        <span style="color: red;font-size: 24rpx">{{ data.more?'收起':'更多' }}</span>
        <IconFont name="rect-right" color="red" size="10"></IconFont>
      </view>

    </view>

    <view class="card">
      <nut-grid :border="false" :column-num="5">
        <nut-grid-item v-for="item in (data.more?data.children:data.children.slice(0,5))" :key="item"
                       @click.stop="emit('childrenClick',item)">
          <view style="display: flex;flex-direction: column;justify-content: space-evenly;align-items: center">
            <nut-avatar size="50" shape="square">
              <img
                  :src="item.icon"
              />
            </nut-avatar>
            <view style="font-size: 12px;margin-top: 8px">{{item.name}}</view>
          </view>
        </nut-grid-item>
      </nut-grid>
    </view>
  </view>
</template>
<script setup>

import {IconFont} from "@nutui/icons-vue";
import {defineEmits, ref} from "vue";

const emit = defineEmits(['childrenClick',]);

const props = defineProps({
  data: {
    type: Object,
    default: {}
  }
});
</script>


<style>
.container {

}
</style>